@warm: rgb(30, 20, 0);
@blue: rgb(39, 141, 210);

.anti-aliased() {
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.text-select-off() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.shadow( @horizontalOffset:0px, @verticalOffset:0px, @blur:5px, @spread:3px, @color:fade(@warm, 10%)) {
	-webkit-box-shadow: @horizontalOffset @verticalOffset @blur @spread @color;
	-moz-box-shadow: @horizontalOffset @verticalOffset @blur @spread @color;
	box-shadow: @horizontalOffset @verticalOffset @blur @spread @color;
}

.ease(@speed: .2s) {
	webkit-transition: all @speed ease-in-out;
	-moz-transition: all @speed ease-in-out;
	-o-transition: all @speed ease-in-out;
	transition: all @speed ease-in-out;
}

@font-face {
	font-family: MerriReg;
	src: url('fonts/Merriweather-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: MerriLight;
	src: url('fonts/Merriweather-Light.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: RoboBold;
	src: url('fonts/Roboto-Bold.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: RoboReg;
	src: url('fonts/Roboto-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0;
	width:100%;
	height:100%;
}

p, h1, h2, h3, h4, span, a, li {
	.anti-aliased();
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: normal;
}

h1 {
	font-family: MerriReg;
	color: fade(@warm, 75%);
	font-size: 18px;
	line-height: 55px;
}

h2 {
	font-family: MerriLight;
	font-size: 24px;
	color: fade(@warm, 70%);
	line-height: 40px;
}

h3 {
	font-family: RoboBold;
	color: fade(@warm, 70%);
	font-size: 12px;
	margin: 15px 0;
}

h4 {
	margin: 20px 0;
}

p, li {
	font-family: RoboReg;
	color: fade(@warm, 70%);
	font-size: 12px;
	line-height: 18px;
}

a {
	text-decoration: none;
	width: auto;
	color: inherit;
}

b {
	font-family: RoboBold;
	font-style: normal;
	font-weight: normal;
}

ul, ol {
	padding-left: 25px;
}

table, th, td {
    font-family: RoboReg;
    font-style: normal;
    font-weight: normal;  
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5); 
    border: 1px solid #d2d0cc;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
}

th {
  font-family: RoboBold;
  font-style: normal;
  font-weight: normal;  
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  background-color: #d2d0cc;
  text-align: left;
}

html {
	background: fade(@warm, 5%);
	height: 100%;
}

a {
	&:hover {
		text-decoration: none !important
	}
	.user-account {
		float: left;
		padding: 10px;
		background: fade(@warm, 50%);
		color: white;
		font-family: RoboReg;
		margin: 0 10px 0 0;
		.ease();
		&:hover {
			background: @blue;
		}
		&.secondary {
			font-size: 12px !important;

		}
	}
}

form {
	div {
		select {
			margin: 20px 10px;
			width: 200px;
			height: 25px;
			box-sizing:content-box;
			border: 1px solid fade(white, 100%);
			background: fade(@warm, 25%);
		}
		label {
			margin: 10px 0;
			font-family: RoboReg;
			color: fade(@warm, 80%);
		}
	}
}

.basic {
	margin: 0 10%;
}

p {
	margin: 10px 0;
	b {
		// color: red;
		font-size: 14px;
	}
	&#goodMessage {
		b {
			color: @warm;
		}
	}
}

body {
	height: 100%;
	#main-con {
		padding: 0 0 20px 0;
		min-width: 600px;
		.social-it-up {
			.shadow();
			background: white;
			position: fixed;
			right: 0;
			top: 50%;
			width: 95px;
			margin-top: -25px;
			z-index: 9999;
			padding: 10px;
			#facebook {
				margin-top: 5px;
			}
		}
		#header-con {
			position: fixed;
			width: 80%;
			height: 50px;
			background: fade(white, 95%);
			z-index: 9999;
			.shadow();
			padding: 0 10%;
			#img {
				background: transparent url('images/plot.png') no-repeat;
				height: 50px;
				width: 50px;
				background-size: 100%;
				float: left;
			}
			#title {
				// width: 500px;
				float: left;
				h1 {
					padding-left: 10px;
				}
			}		
			#links {
				div {
					float: right;
					background: fade(@warm, 50%);
					height: 30px;
					margin: 10px 0 0 5px;
					width: 80px;
					h1 {
						font-family: RoboReg;
						color: white;
						font-size: 14px;
						line-height: 30px;
						padding: 0 15px;
						text-align: center;
					}
				}
			}
			#button {
				float: right;
				input {
					margin-top: 5px;
					height: 40px;
					border-radius: 0;
					background: fade(@warm, 50%);
					border: 0px;
					font-family: RoboReg;
					font-size: 14px;
					color: white;
					.anti-aliased();
					padding: 0 10px;
					.ease();
					cursor: pointer;
					&:hover {
						opacity: .8;
					}
				}
			}
		}
		#intro {
			padding: 95px 0 40px 0;
			&.manual {
				padding: 95px 0 0px 0;
				h2 {
					font-size: 28px;
					margin: 40px 0;
				}
			}
		}
		#body-con {
			position: relative;
			a {
				color: @blue;
				&:hover {
					text-decoration: underline !important;
				}
			}
			#download-info {
				width: 50%;
				#download-it {
					margin: 0px 0 10px 0;
					p {
						// color: fade(@warm, 50%);
						span {
							font-family: roboBold;
						}
					}
				}
				#download-links {
					height: 25px;
					margin-bottom: 20px;
					.links {
						float: left;
						width: 100px;
						h1 {
							color: fade(@warm, 65%);
							line-height: 25px;
							a {
								.ease();
								&:hover {
									color: @blue;
								}
							}
						}
					}
				}
				img {
					width: 100%;
					margin-left: -4%;
				}
				#image {
					background: transparent url('images/screenshot.png') no-repeat;
					width: 48%;
					height: auto;
					background-size: 100%;
				}
			}

			.topic {
				margin-bottom: 30px;
				h3, p {
					margin: 5px 0;
				}
			}

			#manual-contents {
				h1, h2, h3, p {
					width: 70%;
				}
				h1 {
					font-size: 18px;
					line-height: 26px;
					margin-top: 25px;
				}
				p {
					margin: 10px 0;
				}

				h3{
					margin: 20px 0 10px 0;
				}
				img {
					width: auto;
					max-width: 70%;
					height: auto;
				}
				.section {
					border-top: 1px solid fade(@warm, 20%);
					margin: 30px 0;
					&#guideline {
						height: 340px;
						min-width: 700px;
					}
					&#datasets {
						// height: 390px;
					}
					.datasets {
						 float: left;
						position: relative;
						width: 200px;
						height: 200px;
						background: white;
						margin: 20px 20px 0 0;
						.shadow();
						.ease();
						// .shadow(0px, 0px, 5px, 5px);

						.color {
							width: 100%;
							height: 5px;
						}
						&#raw .color {
							background: rgb(0, 155, 123);
						}
						&#mira .color {
							background: rgb(0, 184, 45);
						}
						&#csv .color {
							background: rgb(124, 209, 150);
						}
						&#verse .color {
							background: rgb(20, 201, 166);
						}			 
						&#raw .data-button:hover {
							background: rgb(0, 155, 123);
						}
						&#mira .data-button:hover {
							background: rgb(0, 184, 45);
						}
						&#csv .data-button:hover {
							background: rgb(124, 209, 150);
						}
						&#verse .data-button:hover {
							background: rgb(20, 201, 166);
						}					
						h4 {
							font-family: MerriLight;
							font-size: 18px;
							padding: 0 10px;
							color: fade(@warm, 80%);
						}
						a {
							cursor: pointer;
							color: white;
							&:hover {
								color: white;
								text-decoration: none;
							}
							h1 {
								font-family: RoboReg;
								font-size: 14px;
								text-align: center;
								margin: 0;
								width: 100%;
								padding: 10px 0;
								color: white;
							}
						}
						.data-buttons {
							position: absolute;
							bottom: 0;
							width: 100%;
							.data-button {
								// border: 1px solid red;
								float: left;
								background: fade(@warm, 30%);
								width: 50%;
								// height: 50px;
								&.about h1{
									border-left: 1px solid white;
								}
							}
						}
					}
				}
			}

			#instructions {
				width: 48%;
				position: absolute;
				right: 0;
				top: 92px;
				a {
					color: @blue;
					&:hover {
						text-decoration: underline;
					}
				}
			}

			#more-info {
				margin-top: 20px;
				position: relative;
				.topic {
					h3 {
						margin-top: 0;
					}
				}
				#about {
					width: 48%;
					a {
						color: @blue;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				#reading {
					position: absolute;
					width: 48%;
					right: 0;
					top: 0;
					a {
						color: @blue;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
			form {
				::-webkit-input-placeholder {color: white;}
				:-moz-placeholder { /* Firefox 18- */color: white;}
				::-moz-placeholder {  /* Firefox 19+ */color: white;}
				:-ms-input-placeholder {color: white;}

				input {
					cursor: pointer;
					color: fade(@warm, 80%);
					padding: 15px;
					margin: 5px 0;
					border: 1px solid white;
					background: fade(@warm, 20%);
					.anti-aliased();
					font-size: 14px;

				}
				input[type="submit"] {
					width: 100px;
					line-height: 15px;
					background: @blue;
					color: white;
					border: 0px;
					font-size: 14px;
					.anti-aliased();
					// font-family: RoboReg;
				}
			}
		}

		#footer {
			border-top: 1px solid fade(@warm, 25%);
			height: 50px;
			margin: 0;
			p {
				line-height: 50px;
				margin: 10px 0;
			}
		}
	}
}